<template>
  <view class="incomeMain">
    <view class="incomeBox">
      <view class="monthIncomeMain">
        <view class="monthIncomeBody">
          <view class="otherTotalBox">
            <view class="totalView">
              <view class="flex align-center"
                >累计收益(元)<view
                  >今日收益：{{
                    balance.total_income
                      ? $tools.format(balance.total_income)
                      : "0.00"
                  }}元</view
                ></view
              >
              <view
                ><text>￥</text
                >{{
                  balance.today_income
                    ? $tools.format(balance.today_income)
                    : "0.00"
                }}</view
              >
            </view>
          </view>
        </view>
        <!-- 月份筛选 -->
        <view class="selectView solid-top">
          <view class="selectYearsBox flex align-center justify-between">
            <view class="flex align-center">
              <picker
                mode="date"
                :value="year"
                :start="yearCurrent"
                fields="year"
                @change="bindDateChange"
              >
                <view class="uni-input">{{ year }}</view>
              </picker>
              年
              <u-icon
                class="xIcon"
                name="arrow-down-fill"
                color="#fff"
                size="24"
              ></u-icon>
            </view>
            <view class="noticeText flex align-center">
              <u-icon
                class="uIcon"
                name="error-circle"
                color="#fff"
                size="28"
              ></u-icon>
              <text>请勿频繁切换</text>
            </view>
          </view>
          <view class="selectMonthBox">
            <u-tabs
              :list="monthList"
              :is-scroll="true"
              :current="monthCurrent"
              bg-color="#fb4535"
              active-color="#fff"
              inactive-color="#fff"
              bar-height="10"
              @change="monthChange"
            ></u-tabs>
          </view>
        </view>
        <!-- 数据统计 -->
        <view class="incomeStatisticsMain">
          <view class="bg"></view>
          <view class="incomeStatisticsBox">
            <view class="incomeDataBox">
              <view class="item solid-bottom">
                <view class="title">
                   <view class="cu-bar">
                    <view class="action sub-title top">
                      <text class="text-xl text-bold text-orange"
                        >交易/激活</text
                      >
                      <text class="bg-orange"></text>
                    </view>
                  </view>
                </view>
                <view class="datas flex align-center justify-around">
                  <view>
                    <text>{{
                      income1Data.tradeIncome ? income1Data.tradeIncome : "0.00"
                    }}</text>
                    交易收益(元)
                  </view>
                  <view>
                    <text>{{
                      income1Data.activeIncome
                        ? income1Data.activeIncome
                        : "0.00"
                    }}</text>
                    激活收益(元)
                  </view>
                </view>
              </view>
              <view class="item">
                <view class="title">
                  <view class="cu-bar">
                    <view class="action sub-title top">
                      <text class="text-xl text-bold text-orange"
                        >个人/团队</text
                      >
                      <text class="bg-orange"></text>
                    </view>
                  </view>
                </view>
                <view class="datas flex align-center justify-around">
                  <view @tap="$u.route({ url: '/pages/income/incomeList' })">
                    <text>{{
                      income2Data.personalIncome
                        ? income2Data.personalIncome
                        : "0.00"
                    }}</text>
                    个人收益(元)
                    <view class="flex align-center"
                      >查看详情<u-icon
                        class="uIcon"
                        name="arrow-right"
                        color="#fb4535"
                        size="24"
                      ></u-icon
                    ></view>
                  </view>
                  <view
                    @tap="$u.route({ url: '/pages/income/groupIncomeList' })"
                  >
                    <text>{{
                      income2Data.groupIncome ? income2Data.groupIncome : "0.00"
                    }}</text>
                    团队收益(元)
                    <view class="flex align-center"
                      >查看详情<u-icon
                        class="uIcon"
                        name="arrow-right"
                        color="#fb4535"
                        size="24"
                      ></u-icon
                    ></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--  <view class="incomeStatisticsMain">
          <view class="incomeStatisticsBox">
            <view class="pieMain">
              <view class="pieBox">
                <view class="title">维度一收益占比</view>
                <view class="charts-box"
                  ><qiun-data-charts type="pie" :chartData="pieData1"
                /></view>
                <view class="picList">
                  <view
                    class="item flex align-center justify-between solid-bottom"
                  >
                    <view>交易收益</view>
                    <view>
                      <text>{{
                        income1Data.tradeIncome
                          ? income1Data.tradeIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                  <view
                    class="item flex align-center justify-between"
                  >
                    <view>激活收益</view>
                    <view>
                      <text>{{
                        income1Data.activeIncome
                          ? income1Data.activeIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                </view>
              </view>
            </view>
             <view class="pieMain">
              <view class="pieBox">
                <view class="title">维度二收益占比</view>
                <view class="charts-box"
                  ><qiun-data-charts type="pie" :chartData="pieData2"
                /></view>
                <view class="picList">
                  <view
                    class="item flex align-center justify-between solid-bottom"
                  >
                    <view>个人收益</view>
                    <view>
                      <text>{{
                        income2Data.personalIncome
                          ? income2Data.personalIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                  <view
                    class="item flex align-center justify-between"
                  >
                    <view>团队收益</view>
                    <view>
                      <text>{{
                        income2Data.groupIncome
                          ? income2Data.groupIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view> -->
      </view>
    </view>
    <u-toast ref="uToast" />
    <!-- 底部导航 -->
    <u-tabbar
      :list="tabBarList"
      :mid-button="false"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :border-top="borderTop"
      mid-button-size="76"
      icon-size="40"
      height="105rpx"
    ></u-tabbar>
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBarList: [],
      borderTop: true,
      inactiveColor: "#909399",
      activeColor: "#fb4535",
      year: "",
      month: "",
      yearCurrent: "2018",
      monthCurrent: 0,
      monthList: [
        {
          name: "1月",
        },
        {
          name: "2月",
        },
        {
          name: "3月",
        },
        {
          name: "4月",
        },
        {
          name: "5月",
        },
        {
          name: "6月",
        },
        {
          name: "7月",
        },
        {
          name: "8月",
        },
        {
          name: "9月",
        },
        {
          name: "10月",
        },
        {
          name: "11月",
        },
        {
          name: "12月",
        },
      ],
      yearMouthDate: "",
      balance: {
        today_income: "0.00",
        total_income: "0.00",
      },
      income1Data: {
        tradeIncome: "0.00",
        activeIncome: "0.00",
      },
      income2Data: {
        personalIncome: "0.00",
        groupIncome: "0.00",
      },
      // pieData1: {
      //   series: [
      //     {
      //       data: [],
      //     },
      //   ],
      // },
      // pieData2: {
      //   series: [
      //     {
      //       data: [],
      //     },
      //   ],
      // },
    };
  },
  onLoad() {
    this.tabBarList = this.$tabbar.tabbar;
    this.getYearsMonth();
  },
  onShow() {
    let isAuth = uni.getStorageSync("loginInfo").isCert;
    if (isAuth == 1) {
      this.withdrawMoney();
    }
  },
  onPullDownRefresh() {
    this.GetYearMouthDate();
  },
  methods: {
    monthChange(index) {
      this.monthCurrent = index;
      this.page = 1;
      let $month = index + 1;
      if ($month < 10) {
        $month = "0" + $month;
      }
      this.month = $month;
      this.GetYearMouthDate();
    },
    bindDateChange: function (e) {
      this.year = e.target.value;
      this.monthCurrent = 0;
      this.month = "01";
      this.GetYearMouthDate();
    },

    // 获取当前年月
    getYearsMonth() {
      let date = new Date();
      let currentYear = date.getFullYear();
      let currentMonth = date.getMonth() + 1;
      currentMonth = currentMonth < 10 ? "0" + currentMonth : currentMonth;
      // let mydate = currentYear.toString() + "-" + currentMonth.toString();
      // 当月
      this.monthCurrent = date.getMonth();
      this.year = currentYear;
      this.month = currentMonth;
      this.yearMouthDate = this.year + "-" + this.month;
      this.GetYearMouthDate();
    },
    // 获取总计展示
    withdrawMoney() {
      this.$u.api.getUserIncome().then((res) => {
        if (res.status == 200) {
          this.balance = res.result;
        }
      })
	  .catch((res) => {
	    if (res.errMsg == "request:fail timeout") {
	      this.$u.toast("请求超时，请重试!");
	    } else if (res.errMsg == "request:fail") {
	      this.$u.toast("请求失败，请重试");
	    } else {
	      this.$u.toast(res.resultDesc);
	    }
	    this.$loading(false);
	    setTimeout(() => {
	      this.$u.route({
	        type: "navigateBack",
	        delta: 1,
	      });
	    }, 2000);
	  });
    },
    GetYearMouthDate() {
      this.yearMouthDate = this.year + "-" + this.month;
      this.getIncome1Data();
      this.getIncome2Data();
    },
    getIncome1Data() {
      this.$u.api
        .getIncome1({ searchMonth: this.yearMouthDate })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.income1Data = datas;
            // let tradeIncome = datas.tradeIncome ? datas.tradeIncome : 0;
            // let activeIncome = datas.activeIncome ? datas.activeIncome : 0;
            // let temporaryPieData = {
            //   series: [
            //     {
            //       data: [
            //         { name: "交易收益", value: tradeIncome },
            //         { name: "激活收益", value: activeIncome },
            //       ],
            //     },
            //   ],
            // };
            // setTimeout(() => {
            //   this.pieData1 = temporaryPieData;
            // });
          }
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
		  if (res.errMsg == "request:fail timeout") {
		    this.$u.toast("请求超时，请重试!");
		  } else if (res.errMsg == "request:fail") {
		    this.$u.toast("请求失败，请重试");
		  } else {
		    this.$u.toast(res.resultDesc);
		  }
		  this.$loading(false);
		  setTimeout(() => {
		    this.$u.route({
		      type: "navigateBack",
		      delta: 1,
		    });
		  }, 2000);
		});
    },
    getIncome2Data() {
      this.$u.api
        .getIncome2({ searchMonth: this.yearMouthDate })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.income2Data = datas;
            // let personalIncome = datas.personalIncome
            //   ? datas.personalIncome
            //   : 0;
            // let groupIncome = datas.groupIncome ? datas.groupIncome : 0;
            // let temporaryPieData = {
            //   series: [
            //     {
            //       data: [
            //         { name: "个人收益", value: personalIncome },
            //         { name: "团队收益", value: groupIncome },
            //       ],
            //     },
            //   ],
            // };
            // setTimeout(() => {
            //   this.pieData2 = temporaryPieData;
            // });
          }
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
		  if (res.errMsg == "request:fail timeout") {
		    this.$u.toast("请求超时，请重试!");
		  } else if (res.errMsg == "request:fail") {
		    this.$u.toast("请求失败，请重试");
		  } else {
		    this.$u.toast(res.resultDesc);
		  }
		  this.$loading(false);
		  setTimeout(() => {
		    this.$u.route({
		      type: "navigateBack",
		      delta: 1,
		    });
		  }, 2000);
		});
    },
  },
};
</script>

<style lang="scss">
.monthIncomeMain {
  position: relative;

  .circleView {
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    position: absolute;
    top: -100rpx;
    right: -120rpx;
    border: 50rpx solid rgba(253, 149, 140, 0.5);
    z-index: 9;
  }

  .monthIncomeHeader {
    background-color: #fb4535;
    padding: 50rpx 40rpx;

    .monthTotalIcomeBox {
      position: relative;
      z-index: 99;

      view {
        font-weight: bold;
        color: #fff;

        &:nth-of-type(1) {
          font-size: 38rpx;
          padding-left: 5rpx;

          text {
            font-size: 38rpx;
            padding-right: 10rpx;
          }
        }

        &:nth-of-type(2) {
          font-size: 38rpx;
          padding-top: 20rpx;

          text {
            font-size: 80rpx;
            font-family: "numberFont";
            letter-spacing: 5rpx;
            padding-left: 10rpx;
          }
        }
      }
    }
  }

  .monthIncomeBody {
    position: relative;
    background-color: #fb4535;

    &::before {
      content: "";
      width: 100%;
      height: 8rpx;
      background: url("../../static/images/lineImg.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: -4rpx;
      right: 0;
      z-index: 10;
    }

    .iconBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: -30rpx;
      right: 40rpx;
      background-color: #fff;
      box-shadow: 0 0 10rpx #f76b6c;
      border-radius: 50%;
      z-index: 99;

      .xIcon {
        font-weight: bold;
      }
    }

    .otherTotalBox {
      padding: 30rpx;
      .totalView {
        color: #fff;
        view {
          &:first-of-type {
            font-size: 28rpx;
            line-height: 40rpx;
            view {
              margin-left: 20rpx;
              background: rgba(0, 0, 0, 0.1);
              height: 40rpx;
              line-height: 40rpx;
              padding: 0 26rpx 0 20rpx;
              border-radius: 50rpx;
              font-size: 24rpx;
              position: relative;
              top: 1rpx;
            }
          }
          &:nth-of-type(2) {
            padding-top: 18rpx;
            font-size: 60rpx;
            font-family: "numberFont";
            text {
              font-size: 32rpx;
            }
          }
        }
      }
    }
  }
}

.selectView {
  background-color: #fb4535;

  .selectYearsBox {
    padding: 20rpx 40rpx 0rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #fff;
    position: relative;
    z-index: 9;

    .xIcon {
      margin-left: 10rpx;
    }

    .uIcon {
      margin-right: 10rpx;
    }

    .noticeText {
      font-size: 28rpx;

      text {
        position: relative;
        top: -2rpx;
      }
    }
  }

  .selectMonthBox {
    padding: 0 18rpx 0rpx;
    background-color: #fb4535;
  }
}
.incomeStatisticsMain {
  .bg {
    width: 100%;
    height: 110rpx;
    background: #fb4535;
  }
  .incomeStatisticsBox {
    padding: 0 30rpx;
    .incomeDataBox {
      background: #fff;
      position: relative;
      z-index: 2;
      margin-top: -100rpx;
      box-shadow: 0 10rpx 15rpx rgb(224, 224, 224);
      border-radius: 10rpx;
      padding: 10rpx 30rpx 40rpx;
	  &>.item:first-child{
		  padding-bottom: 50rpx;
	  }
      .item {
        padding: 20rpx 0;
        .title {
          padding-bottom: 20rpx;
        }
        .datas {
			font-size: 24rpx;
			color: #000;
          view {
            text {
              display: block;
              font-family: "numberFont";
              font-size: 50rpx;
              color: #fb4535;
            }
            view {
              padding-top: 10rpx;
              color: #fb4535;
              .uIcon {
                position: relative;
              }
            }
          }
        }
      }
    }
    // .pieMain {
    //   padding: 30rpx;
    //   background-color: #fff;
    //   border-bottom: 10rpx solid #f1f1f1;
    //   &:last-of-type {
    //     border-bottom: none;
    //   }
    //   .pieBox {
    //     .title {
    //       font-size: 36rpx;
    //       font-weight: bold;
    //     }
    //     .charts-box {
    //       width: 100%;
    //       height: 200px;
    //     }
    //     .picList {
    //       padding: 0 50rpx;
    //       background: #f1f1f1;
    //       border-radius: 10rpx;
    //       .item {
    //         height: 100rpx;
    //         view {
    //           &:nth-of-type(1) {
    //             font-size: 32rpx;
    //             color: #333;
    //             font-weight: bold;
    //           }
    //           &:nth-of-type(2) {
    //             font-size: 24rpx;
    //             text {
    //               font-size: 38rpx;
    //               font-weight: bold;
    //               font-family: "numberFont";
    //               letter-spacing: 3rpx;
    //               color: #fb4535;
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>
